<template>
  <div>
    <el-button @click="showGunDialog" type="primary">设置扫码枪模式</el-button>
    <el-dialog
      :visible.sync="gunModelDialog"
      width="450px"
      title="请选择扫码枪型号"
      @close="closeDialog"
    >
      <div style="margin-top: -20px">
        <div class="mgb20">目前仅支持设置「科密EW-3200」「思远U2-W」型号的扫描枪，其他扫码枪型号请根据说明书进行设置</div>
        <div>
          扫码枪型号：
          <el-button type="primary" plain @click="switchGunModel(gunType.EW3200)">EW-3200</el-button>
          <el-button type="primary" plain @click="switchGunModel(gunType.U2W)">U2-W</el-button>
        </div>
      </div>

    </el-dialog>

    <el-dialog
      :visible.sync="gunEW3200Dialog"
      width="800px"
      :title="gunStep <= 2 ? `设置扫码枪模式（${gunStep}/2）` : `测试扫码枪（${gunStep}/3）`"
      @close="closeDialog"
    >
      <div v-if="gunStep === 1">
        <div>
          请使用<span class="error-color" style="font-weight: bold">扫码枪</span>扫描下方条形码,
          <br>
          并在扫码枪<span class="error-color" style="font-weight: bold">震动</span>或者听到<span class="error-color" style="font-weight: bold">“嘀”的一声</span>后，点击「下一步」按钮：
        </div>
        <div class="mgt20">
          <img src="~@/assets/images/scanner1.png" alt="" width="250">
          <!--        <div>2.4G模式</div>-->
          <div>设置码1</div>
        </div>
        <div class="gun-model-tips mgt20">
          您也可点击通过「打印设置码」按钮，系统将直接通过打印机为您打印设置码，
          <br>
          您可以直接扫描纸张上的设置码进行设置
        </div>
      </div>
      <div v-if="gunStep === 2">
        <div>
          请使用<span class="error-color" style="font-weight: bold">扫码枪</span>扫描下方条形码,
          <br>
          并在扫码枪<span class="error-color" style="font-weight: bold">震动</span>或者听到<span class="error-color" style="font-weight: bold">“嘀”的一声</span>后，点击「下一步」按钮：
        </div>
        <div style="margin-top: 20px">
          <img src="~@/assets/images/scanner2.png" alt="" width="250">
          <!--          <div>美国键盘</div>-->
          <div>设置码2</div>
        </div>
        <div class="gun-model-tips mgt20">
          您也可点击通过「打印设置码」按钮，系统将直接通过打印机为您打印设置码，
          <br>
          您可以直接扫描纸张上的设置码进行设置
        </div>
      </div>

      <div slot="footer" class="dialog-footer" v-if="gunStep <= 2">
        <el-button @click="printGunTest" :loading="printerTestLoading">打印设置码</el-button>
        <el-button type="warning" @click="gunStepNext">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="gunU2WDialog"
      width="800px"
      :title="`设置扫码枪模式（${gunStep}/3）`"
      @close="closeDialog"
    >
      <div v-if="gunStep === 1">
        <div>
          请使用<span class="error-color" style="font-weight: bold">扫码枪</span>扫描下方二维码,
          <br>
          等待扫码枪“滴”“滴”“滴”声响起后，再将接收器插入计算机USB接口：
        </div>
        <div class="mgt20">
          <img src="~@/assets/images/scannerU2W/scanner1.png" alt="" width="150">
          <!--        <div>2.4G模式</div>-->
          <div style="width: 150px;text-align: center">配对</div>
        </div>
        <div class="gun-model-tips mgt20">
          您也可点击通过「打印设置码」按钮，系统将直接通过打印机为您打印设置码，
          <br>
          您可以直接扫描纸张上的设置码进行设置
        </div>
      </div>
      <div v-if="gunStep === 2">
        <div>
          请使用<span class="error-color" style="font-weight: bold">扫码枪</span>扫描下方二维码,
          <br>
          并在扫码枪<span class="error-color" style="font-weight: bold">震动</span>或者听到<span class="error-color" style="font-weight: bold">“嘀”的一声</span>后，点击「下一步」按钮：
        </div>
        <div style="margin-top: 20px">
          <img src="~@/assets/images/scannerU2W/scanner2.png" alt="" width="150">
          <!--          <div>美国键盘</div>-->
          <div style="width: 150px;text-align: center">设置码1</div>
        </div>
        <div class="gun-model-tips mgt20">
          您也可点击通过「打印设置码」按钮，系统将直接通过打印机为您打印设置码，
          <br>
          您可以直接扫描纸张上的设置码进行设置
        </div>
      </div>
      <div v-if="gunStep === 3">
        <div>
          请使用<span class="error-color" style="font-weight: bold">扫码枪</span>扫描下方二维码,
          <br>
          并在扫码枪<span class="error-color" style="font-weight: bold">震动</span>或者听到<span class="error-color" style="font-weight: bold">“嘀”的一声</span>后，点击「下一步」按钮：
        </div>
        <div style="margin-top: 20px">
          <img src="~@/assets/images/scannerU2W/scanner3.png" alt="" width="150">
          <!--          <div>USB HID模式</div>-->
          <div style="width: 150px;text-align: center">设置码2</div>
        </div>
        <div class="gun-model-tips mgt20">
          您也可点击通过「打印设置码」按钮，系统将直接通过打印机为您打印设置码，
          <br>
          您可以直接扫描纸张上的设置码进行设置
        </div>
      </div>

      <div slot="footer" class="dialog-footer" v-if="gunStep <= 3">
        <el-button @click="printGunTest" :loading="printerTestLoading">打印设置码</el-button>
        <el-button type="warning" @click="gunStepNext">下一步</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="gunTestDialog"
      width="800px"
      title="测试扫码枪"
      @close="closeDialog"
    >
      <div class="gun-model-tips">
        请使用扫码枪扫描下方条形码，以检测扫码枪是否正常工作
        <br>
        - 如果扫码结果一致，系统将自动完成验证并关闭当前窗口，您可直接扫描快递单号和美客多面单
        <br>
        - 如遇异常情况，请重新配对；如遇重新配对异常，请联系开发人员处理
      </div>
      <div>
        <svg id="barcode"></svg>
      </div>
      <div class="mgt10">
        条形码内容：{{gunTestStr}}
      </div>
      <div class="mgt10">
        当前扫描内容：<el-input style="display: inline-block;width: 300px" ref="testInput" :value="gunScannerTest"></el-input>
      </div>
      <div class="mgt20">
        <el-button type="danger" @click="gunTestAgain">重新匹配</el-button>
        <el-button @click="printGunTest"  :loading="printerTestLoading">打印设置码</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import JsBarcode from "jsbarcode";
import {generateRandomString} from "@/utils";
import {getMinoShippingHWTestPDF} from "@/api/hardware";

const gunType = {
  EW3200: 'EW-3200', // 科密 EW-3200
  U2W: 'U2-W', // 思远 U2-W
} // 扫描枪类型

export default {
  name: 'gunModelSet',
  props: {
    gunScannerTest: {
      type: String,
    }
  },
  watch: {
    gunScannerTest(){
      if(!this.gunScannerTest){
        return;
      }
      if(this.gunScannerTest === this.gunTestStr){
        this.$successMessage('扫码枪运行正常');
        this.gunModelDialog = false
        this.gunEW3200Dialog = false
        this.gunU2WDialog = false
        this.gunTestDialog = false
      }else{
        this.$errorMessage('扫码枪扫码结果异常，请重新配对或联系开发人员处理');
      }
    },
  },
  data(){
    return {
      gunStep: 1, // 第几步
      gunModel: '', // 扫描枪模式
      gunModelDialog: false,
      gunEW3200Dialog: false,
      gunU2WDialog: false,
      gunTestDialog: false,
      printerTestLoading: false,
      gunTestStr: '',
      gunType
    }
  },
  methods: {
    // 显示对应的弹窗
    showGunDialog(){
      this.gunModelDialog = true
      this.$emit('changeDialog',true)
    },
    gunStepNext(){

      if(this.gunStep === 2 && this.gunModel === gunType.EW3200){
        this.gunEW3200Dialog = false
        this.gunU2WDialog = false
        this.gunTestDialog = true
        this.createGunTestString()
        return;
      }
      if(this.gunStep === 3 && this.gunModel === gunType.U2W){
        this.gunEW3200Dialog = false
        this.gunU2WDialog = false
        this.gunTestDialog = true
        this.createGunTestString()
        return;
      }
      this.gunStep++;
    },
    gunTestAgain(){
      this.gunStep = 1;
      this.gunTestDialog = false
      if(this.gunModel === gunType.EW3200){
        this.gunEW3200Dialog = true
        this.gunU2WDialog = false
      }
      if(this.gunModel === gunType.U2W){
        this.gunU2WDialog = true
        this.gunEW3200Dialog = false
      }
    },
    // 选择扫描枪型号
    switchGunModel(model){
      this.gunModel = model
      this.gunStep = 1;
      switch (model){
        case gunType.EW3200:
          this.gunEW3200Dialog = true
          break;
        case gunType.U2W:
          this.gunU2WDialog = true
          break;
      }
      this.gunModelDialog = false
    },
    // 打印测试码
    printGunTest(){
      this.$successMessage('正在打印，请稍后...')
      getMinoShippingHWTestPDF({
        gunModel: this.gunModel
      })
        .then(res=>{
          this.$emit('printPDF', res.data)
        })


    },
    // 生成随机的字符串
    createGunTestString(){
      this.gunTestStr = generateRandomString(16,true)
      setTimeout(()=>{
        JsBarcode("#barcode", this.gunTestStr,{
          width: 2,
          height: 100,
          fontSize: 20,
        });
        this.$refs.testInput.focus()
      },0)


    },
    closeDialog(){
      const flag = !this.gunTestDialog && !this.gunEW3200Dialog && !this.gunU2WDialog
      if(flag){
        this.$emit('changeDialog',false)
      }


    }
  }
}
</script>

<style scoped lang="scss">

</style>
